<!--
扩展element-ui 抽屉组件，实现左右或上下拉伸
-->

<template>
    <el-drawer :title="title" :visible.sync="show" :class="direction === 'rtl' ? 'drawer-drag' : ''" :modal="false"
        :size="size || '660px'" append-to-body @close="$emit('close')"
        @closed="$emit('closed'); $emit('update:visible', false)" :direction="direction">

        <div class="drag-bar" v-if="direction === 'rtl'" draggable v-resize-left></div>
        <div class="drag-bar-top" v-else draggable v-resize-top></div>

        <slot></slot>


    </el-drawer>
</template>

<script>
export default {
    props: {
        title: String,
        visible: Boolean,
        direction: {
            type: String,
            default: 'rtl'
        },
        size: String
    },
    mounted() {
        // this.$root.$on('close-drawer', () => {
        //     this.show = false
        //     this.$emit('update:visible', false)
        // })
        this.show = this.visible
    },
    watch: {
        visible(val) {
            this.show = val
        }
    },
    data() {
        return {
            show: false
        }
    },
    directives: {
        /** 向左拉伸 */
        resizeLeft: { //
            inserted: (el) => {
                let docW = document.body.clientWidth - 300,
                    l = 0,
                    parent = el.parentNode
                let findParent = (el) => {
                    let p = el.parentNode
                    if (p) {
                        if (p.className.match('el-drawer__wrapper') !== null) {
                            parent = p
                        } else {
                            findParent(p)
                        }
                    }
                }
                findParent(el)
                docW = parent.clientWidth

                let setpos = (e) => {
                    if (e.clientX > 0) {
                        let dw = Math.max(100, docW + (l - e.clientX))
                        parent.style.width = dw + 'px'
                    }
                }
                el.ondragstart = function (e) {
                    l = e.clientX
                }
                el.ondrag = setpos
                el.ondragend = function () {
                    docW = parent.clientWidth
                }
            }
        },
        /** 向上拉伸 */
        resizeTop: { //
            inserted: (el) => {
                let docW = document.body.clientWidth - 300,
                    l = 0,
                    parent = el.parentNode
                let findParent = (el) => {
                    let p = el.parentNode
                    if (p) {
                        if (p.className.match('el-drawer ') !== null) {
                            parent = p
                        } else {
                            findParent(p)
                        }
                    }
                }
                findParent(el)
                docW = parent.clientHeight

                let setpos = (e) => {
                    if (e.clientY > 0) {
                        let dw = Math.max(100, docW + (l - e.clientY))

                        parent.style.height = dw + 'px'
                    }
                }
                el.ondragstart = function (e) {
                    l = e.clientY
                }
                el.ondrag = setpos
                el.ondragend = function (e) {
                    docW = parent.clientHeight

                }
            }
        },
    },

}
</script>

<style lang="scss" scoped>
.drag-bar {
    position: absolute;
    left: -20px;
    width: 40px;
    top: 0;
    height: 100%;
    cursor: w-resize;
    z-index: 1002;
    //  background: red;

}

.drag-bar-top {
    position: absolute;
    top: -20px;
    height: 40px;
    left: 0;
    width: 100%;
    cursor: n-resize;
    z-index: 1002;
    // background: red;
}

.drawer-drag {
    width: 661px;
    left: auto;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .2);

    :deep( *) {
        -moz-user-select: none;
        /*火狐*/
        -webkit-user-select: none;
        /*webkit浏览器*/
        -ms-user-select: none;
        /*IE10*/
        -khtml-user-select: none;
        /*早期浏览器*/
        user-select: none;
        /** 去掉蓝色选中底*/
    }

   :deep(.el-drawer__header) {
        border-bottom: 1px solid #ddd;
        padding-bottom: 20px;
    }

   :deep(.el-drawer ){
        width: 100% !important;
    }
}
</style>

